{% extends "base.html" %}
{% load i18n %}
{% load webdesign %}

{% block app_css %}
  <link type="text/css" rel="StyleSheet" href="/static/css/redmond/jquery-ui-1.7.2.custom.css" />
  <link rel="stylesheet" type="text/css" href="/static/css/my_relationship.css" />
{% endblock %}
{% block app_js %}
  <script type="text/javascript" src="/static/js/jquery-ui-1.7.2.custom.min.js"></script>
  <script type="text/javascript" src="/static/js/my_relationship.js"></script>
{% endblock %}
 
{% block container %}
  <div id="playground">
    <input type="hidden" id="offset"/>
    <input type="hidden" id="tab_selector" value="{{ selector }}"/>
    <ul>
      <li><a href="#fans" id="fans_tab">{% trans "Fans" %}</a></li>
      <li><a href="#friends" id="friends_tab">{% trans "Friends" %}</a></li>
      <li><a href="#blocked" id="blocked_tab">{% trans "Blocked"%}</a></li>
    </ul>
    <div id="fans" class="tab">
      <div class="subheader">
        <div class="search">
        {% trans 'search here' %}:<input />
        </div>
      </div>
      <div class="fans_item">
      </div>
      <input id="load_more_fans" type="button" value="{% trans 'load more' %}" />
    </div>
    <div id="friends" class="tab">
      <div class="subheader">
        <div class="search">
        {% trans 'search here' %}:<input />
        </div>
      </div>
      <div class="friends_item">
      </div>
      <input id="load_more_friends" type="button" value="{% trans 'load more' %}" />
    </div>
    <div id="blocked" class="tab">
      <div class="notes">
      </div>
      <input id="load_more_blocked" type="button" value="{% trans 'load more' %}" />
    </div>
  </div>
  <div id="status">{% lorem 1 p %}</div>
  <div id="tools">{% lorem 1 p %}</div>
  <div id="people_visit_me">{% lorem 1 p %}</div>
  <div class="mini_person_item">
    <img class="mini_person_avatar" />
    <span class="mini_person_name" />
  </div>
{% endblock %}
